import React,{ Component } from "react"
import {View, Text, StyleSheet, Image} from "react-native";

export default class Tabloid2 extends Component {
    constructor(props){
        super(props);
        this.state = {
            tabloidPic:[
                {
                    img:require('../../../res/image/Home_5.jpg'),
                    title:'马克思主义基本理论',
                },
                {
                    img:require('../../../res/image/Home_4.jpg'),
                    title:'马克思主义基本理论123',
                },
                {
                    img:require('../../../res/image/Home_3.jpg'),
                    title:'马克思主义基本理论79798',
                }
            ],
        }
    }
     ItemTabloid(){  //横向的图片信息展示
        let Array = [];
        this.state.tabloidPic.map((item,index,data)=>{
            let info = (
                <View style={[styles.itemStyleTa,styles.itemStyle]} key={index}>
                    <Image style={ styles.tabloidImage } source={ item.img } />
                    <Text ellipsizeMode={"tail"} numberOfLines={1} style={ styles.itemText  }>{ item.title }</Text>
                </View>
            );
            Array.push(info);
        });
        if(Array.length/2!==0){
            let info1 = (
                <View style={[styles.itemStyleTa,styles.itemStyle]}>
                    <Text></Text>
                </View>
            );
            return Array.concat(info1)
        }else {
            return Array;
        }

    }
    render(){
        return (
            <View style={styles.container}>
                { this.ItemTabloid() }
            </View>
        )
    }
}

const styles = StyleSheet.create({
   container:{
       flex:1,
       flexDirection:'row',
       justifyContent:'space-around',
       alignItems:'center',
       padding:10,
       flexWrap:'wrap'
   },
    itemStyleTa:{
        width:125,
    },
    itemStyle:{
        margin:15,
        marginBottom:5,
    },
    tabloidImage:{
        height:70,
        width:125,
        borderRadius: 4,
    },
    itemText:{
        marginTop: 5,
        // fontWeight: '300',
    },
});